<template>
  <div>
    <el-form ref="form" :model="book" label-width="80px">
      <el-form-item label="书名">
        <el-input v-model="book.bookName"  style="width: 217px;" placeholder="请输入书名"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="book.author"  style="width: 217px;" placeholder="请输入作者"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="book.introduce"  style="width: 217px;" placeholder="请输入简介"></el-input>
      </el-form-item>

<!--      <el-form-item label="阅读量">-->
<!--        <el-input v-model="book.read"  style="width: 217px;" :disabled="true"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="书籍状态">
        <el-select v-model="book.intestate" style="width: 217px;">
          <el-option label="上架" value="1">上架</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="id" placeholder="请选择类型">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.category"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="会员">
      <el-select v-model="book.vip" style="width: 217px;">
        <el-option label="普通书籍" value="1">普通书籍</el-option>
        <el-option  label="vip书籍"  value="2">vip书籍</el-option>
      </el-select>
    </el-form-item>

      <!--     图片上传-->
      <el-form-item label="头像">
        <el-upload
          action
          list-type="picture-card"
          :auto-upload="false"
          :file-list="fileList"
          :limit="1"
          :on-change="changeImg"
          :on-remove="removeImg"
          margin-left="20px"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onAdd">添加</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserMemberAddView",
  data(){       //data:{}
    return {
      book:{
        id:0,
        bookName:"",
        author:"",
        introduce:"",
        read:0,
        bookshelf:1,
      },
      //选取文件的数组
      fileList:[
        {
          name: '',
          url: '',
        }
      ],
      options:[],
      id:'',

    }
  },
  created(){
    this.getData()
  },
  methods: {
    onAdd() {
      //创建表格对象
      var formData = new FormData()
      formData.append("classId", this.id)
      //书籍对象信息
      for (const arr in this.book) {
        formData.append(arr, this.book[arr])
      }
      // 将fileList中的文件添加到formData中 循环添加文件对象中的raw 后台接收的二进制
      for (const key in this.fileList) {
        formData.append("files",this.fileList[key].raw)
      }
      //添加加入书架的状态
      formData.append("bookshelf",this.bookshelf)
      //请给我写一个确定添加的前置条件
      if (confirm("确定要添加吗")) {
        axios({
          url: "/api/book/add",
          method: "post",
          data: formData,
          //添加请求头
          // headers: {"Content-Type": "multipart/form-data"}
          headers: {"Authorization": "Bearer " + this.$store.state.user.token}
        }).then(res => {
          console.log(res.data.data)
          if(res.data.data==1){
            this.$message({
              message: '添加成功',
              type:'success'
            });
              //返回分类表
              this.$router.push("/novel/bookView")
          }else if(res.data.data==0){
            this.$message({
              message: 'res.data.message',
              type:'error'
            });
          }
          // if(res.data.code=403){
          //   this.$message({
          //     message: res.data.message,
          //     type:'error'
          //   });
          // }else if(res.data.code==1){
          //   this.$message({
          //     message: '添加成功',
          //     type: 'success'
          //   });
          //   //返回分类表
          //   this.$router.push("/novel/bookView")
          // }

        })
      }
    },
    cancel() {
      this.$router.push("/novel/bookView")
    },

    // 获取数据
    getData() {
      axios({
        //获取所有的类型信息
        url: '/api/classification/queryAllCategory',
        method: 'post',
        headers: {"Authorization": "Bearer " + this.$store.state.user.token}
      }).then(res => {
        // console.log(res.data.data.list[0].moduleList)
        console.log(res.data.data)
        // this.bookName=res.data.data.list.forEach(function (item) {
        //   this.options.push({
        //     bookName: item.bookName
        //   })
        // }, this)
        this.options=res.data.data
        // this.options.forEach(item=>{
        //   item.bookName=item.bookName
        // })
      })
    },
    //删除文件
    removeImg(file){
      //根据uid删除对应的文件
      for (const key in this.fileList) {
        if (this.fileList[key].uid === file.uid) {
          this.fileList.splice(key, 1)
        }
      }
    },
    //添加图片
    changeImg(file){
      //直接将文件添加到数组中
      this.fileList.push(file)
      console.log("添加"+file.name)
    },
  }
}
</script>

<style scoped>

</style>
